<template>
    <div class="star-root">
      <div class="star-no"></div>
      <div class="star-up" :style="grade">
          <div></div>
      </div>
    </div>
</template>

    
<script scoped>
export default {
    props:["value"],
    computed: {
      grade(){
        return{
            width:(19/5)*this.value+'vw'
        }

      }
    }
};
</script>
    
<style>
  .star-root{
    height: 4vw;
    position: relative;
    overflow: hidden;
    padding: 1vw;
    width: 100%;
    padding:  0 5vw;
  }
 .star-no{   
    width: 18vw;
   height: 100%;
   background-image: url('/img/main-img/star1.png');
   position: absolute;
   top: 0;
  background-size: 100% 100%;
 }
 .star-up{
     position: absolute;
     top: 0;
    height: 100%;
    overflow: hidden;
     
 }
 .star-up div{
     width: 18vw;
     height: 100%;
      background-image: url('/img/main-img/star2.png');
      background-size: 100% 100%;
 }
</style>